<template>
	<view>
		<view class="content">
			<view class="goods-left">
				<scroll-view style="height:100%" scroll-y="true" :scroll-with-animation="true"
					:enable-back-to-top="true">
					<view class="goods-group" v-for="(item, indexMemu) in hierarchyList" :key="indexMemu"
						@click="clickHierarchy(item)">
						<text class="goods-group-border" v-if="item.hierarchy == params.hierarchy"></text>
						<view class="goods-group-name" :class="item.hierarchy == params.hierarchy? 'color' :''">
							第{{numberToUpperCase(item.hierarchy)}}层
							<u-badge type="error" :offset="[-5,-8]" :absolute="true" max="99"
								:value="item.outliers"></u-badge>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="goods-right">
				<view id="header" style="padding: 24rpx 0 40rpx">
					<view class="top-box">
						<view>
							<u-button color="#C2C2C3" @click="detectionAllShow"
								:customStyle="{width: '303rpx', height: '64rpx', borderRadius: '40rpx',color:'#000000CC'}"
								type="primary" :plain="true" text="批量检测全部电机"></u-button>
						</view>
						<view>
							<u-button color="#C2C2C3" @click="setAllShow"
								:customStyle="{width: '190rpx', height: '64rpx', borderRadius: '40rpx',color:'#000000CC'}"
								type="primary" :plain="true" text="批量设置"></u-button>
						</view>
					</view>
				</view>
				<scroll-view :style="{ height: height + 'px'}" scroll-y="true" v-if="listData.length>0"
					:scroll-with-animation="true" :enable-back-to-top="true">
					<view class="goods-box" v-for="(itemData, index) in listData" :key="index">
						<view class="goods-information-box">
							<view class="goods-img-box" style="background: rgba(255, 0, 0, 0.1);"
								v-if="$u.test.isEmpty(motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane))?itemData.status:motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane)===2">
								<view class="box">
									电机故障
								</view>
							</view>
							<view class="goods-img-box" v-else-if="$u.test.isEmpty(motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane))?!itemData.status:motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane)===1">
								<u--image :showLoading="true" :src='imageUrl+itemData.fileName' v-if="itemData.fileName"
									width="130rpx" height="130rpx"></u--image>
								<u--image v-else :showLoading="true"
									:src='staticFileUrl+"/image/common/default_goods_image.svg"' width="130rpx"
									height="130rpx"></u--image>
							</view>
              <view  v-else-if="!$u.test.isEmpty(motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane)) && motorStatusMap.get(itemData.hierarchy+''+itemData.freightLane)===3" class="goods-img-box" style="flex-direction: column;">
                <u-loading-icon mode="circle" inactive-color="#6072ff"></u-loading-icon>
                <view class="u-font-26">检测中</view>
              </view>
							<view class="goods-information">
								<view class="top">
									<view>{{itemData.alias}}</view>
									<view @click="operationSwitch(itemData)" class="switch-box" v-if="itemData.enabled">
										<view class="switch-button"></view>
										<view class="switch-text">开启</view>
									</view>
									<view @click="operationSwitch(itemData)" class="switch-box switch-box-close" v-else>
										<view class="switch-text .switch-text-close">关闭</view>
										<view class="switch-button"></view>
									</view>
								</view>
								<view class="bottom">
									<view>
										<u-button color="#C2C2C3" @click="aTest(itemData)"
											:customStyle="{width: '160rpx', height: '50rpx', borderRadius: '40rpx',color:'#000000CC'}"
											type="primary" :plain="true" text="电机检测"></u-button>
									</view>
									<view>
										<u-button color="#C2C2C3" @click="editShow(itemData)"
											:customStyle="{width: '112rpx', height: '50rpx', borderRadius: '40rpx',color:'#000000CC',marginRight:'24rpx'}"
											type="primary" :plain="true" text="编辑"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="space"></view>
				</scroll-view>
			</view>
			<!-- <u-empty text="暂无商品" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
               v-else></u-empty> -->
		</view>
		<u-modal :show="restockShow" title="货道编辑" :showConfirmButton="false">
			<view class="restock-modal-box">
				<view class="restock-box">
					<view class="restock-name">货道号</view>
					<u--input :disabled="true"  v-model="item.freightLane"></u--input>
				</view>
				<view class="restock-box">
					<view class="restock-name">货道编号</view>
					<u--input maxlength="5"  type="number" v-model="item.alias"></u--input>
				</view>
				<view class="restock-box">
					<view class="restock-name">货道容量</view>
					<u--input type="number" v-model="item.capacity" @input="capacityInput(item.capacity)"></u--input>
				</view>
				<u-button type="primary" @click="edit"
					:customStyle="{width: '320rpx', height: '70rpx', borderRadius: '40rpx', marginTop:'20rpx'}"
					text="确定"></u-button>
				<u-button type="default" :plain="true" :hairline="true" text="取消" :customStyle="cancelCustomStyle"
					@click="restockShow=false" />
			</view>
		</u-modal>
		<u-modal :show="tipsShow" :showConfirmButton="false">
			<view class="restock-modal-box">
				<u--image src="/static/image/member-management/reminder.png" width="59rpx" height="59rpx"></u--image>
				<view class="kindTips-hint">批量电机检测完成</view>
				<view class="progress-bar">
					<view class="progress-bar-text">{{ normalNumberDetected }}</view>
					<view class="progress-bar-box">
						<view class="progress" :style="{width:normalNumberDetected / totalNumberOfTests * 100+'%'}">
						</view>
					</view>
					<view class="progress-bar-text">{{totalNumberOfTests}}</view>
				</view>
				<u-button type="primary" @click="motorTesting"
					:customStyle="{width: '320rpx', height: '70rpx', borderRadius: '40rpx', margin:'80rpx 0 40rpx'}"
					text="确定"></u-button>
				<!--					<view @click="motorTesting()" class="restock-cancel">取消</view>-->
			</view>
		</u-modal>
		<u-modal :show="showAllDetection" @cancel="showAllDetection=false" @confirm="allTests"
			content='批量检测仅检测已开启的货道,点击确认开始检测' @close="showAllDetection=false" :closeOnClickOverlay="true"
			:showCancelButton='true'></u-modal>

		<u-modal class="modal-containers" :show="showSetAll" title="批量设置" @cancel="showSetAll=false" @confirm="setAll"
			@close="showSetAll=false" :closeOnClickOverlay="true" :showCancelButton='true'>
			<view class="modal">
				<scroll-view style="height:600rpx" scroll-y="true" :scroll-with-animation="true"
					:enable-back-to-top="true" @scrolltolower="reachBottom">
					<view v-for="(item, indexModal) in listAll" :key="indexModal">
						<view class="model-set">
							<u-switch v-model="item.enabled" @change="switchEnabled($event,item)" size="20"></u-switch>
							<text style="margin-left: 50rpx;">货道编号：{{item.alias}}</text>
						</view>
						<u-line></u-line>
					</view>
					<view>
						<u-loadmore :status="status" :load-text="loadText" />
					</view>
				</scroll-view>
				<view style="display: flex;justify-content: space-between;">
					<u-button type="primary" @click="openAll"
						:customStyle="{width: '250rpx', height: '70rpx', borderRadius: '40rpx', margin:'20rpx'}"
						text="全部打开"></u-button>
					<u-button type="primary" @click="closeAll"
						:customStyle="{width: '250rpx', height: '70rpx', borderRadius: '40rpx', margin:'20rpx'}"
						text="全部关闭"></u-button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
  import { eventBus } from '@/main.js'
	export default {
		data() {
			return {
				cancelCustomStyle: {
					border: '1rpx solid rgb(224, 224, 224)',
					fontSize: '26rpx',
					color: 'rgb(193,191,191)',
					width: '320rpx',
					height: '70rpx',
					borderRadius: '40rpx',
					margin: '34rpx 0 40rpx',
				},
				progress: 80,
				imageUrl: this.$configPath.imgURL,
				staticFileUrl: this.$configPath.staticFileUrl,

				hierarchyList: [],
				listData: [],
				listAll: [],
				//货道编辑弹框是否显示
				restockShow: false,
				//提示弹框是否显示
				tipsShow: false,
				params: {
					deviceId: '',
					hierarchy: '',
				},
				status: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				height: 0,
				switchFlag: true,
				item: '',
				showAllDetection: false,
				showSetAll: false,
				//货道检测正常数
				normalNumberDetected: 0,
				//货道检测总数
				totalNumberOfTests: 0,
				//批量设置请求参数
				batchParams: {
					pageNum: 1,
					totalPage: 1,
					pageSize: 10,
					deviceId: '',
					isAll: null,
					displayRackItemDtos: [],
				},
        motorStatusMap:new Map,
        isBluetooth:false,
        deviceNo:'',
        connectionStatus:1,
			};
		},
		onReady() {
			this.getPomHeight();
		},
		onLoad(option) {
			this.params.deviceId = option.id;
			this.batchParams.deviceId = option.id;
      if (option.deviceNo){
          this.deviceNo = option.deviceNo;
      }
      this.isBluetooth = option.isBluetooth;
      if (this.isBluetooth === 'true') {
        console.log("进入蓝牙初始化");
        this.$bluetooth.initBluetooth(this.deviceNo,true);
        this.$bluetooth.startBLEConnectionStateListening(this.deviceNo);
        // this.$bluetooth.createAPageListener(this.deviceNo)
      }
      this.getHierarchyByDeviceId();
		},
    mounted() {
      this.watchSocket();
    },
    created() {
      // 监听事件
      eventBus.$on('connectionStatus', this.handleEventConnectionStatus)
      eventBus.$on('webSocketReconnect', this.watchSocket)
    },
		methods: {
      handleEventConnectionStatus(connectionStatus) {
        console.log('connectionStatus变化',connectionStatus)
        this.connectionStatus = connectionStatus;
      },
      watchSocket() {
        this.$socket.getMessage(opt => {
          // console.info("channel-management消息接收：", opt.data);
          const result = JSON.parse(opt.data)
          if (!this.$u.test.isEmpty(result.hierarchy) && !this.$u.test.isEmpty(result.hierarchy)){
              this.motorStatusMap.set(result.hierarchy+''+result.freightLane,result.motorStatus);
              this.refreshNumberOfFailures(result.hierarchy,result.numberOfFailures);
          }
        })
      },
      refreshNumberOfFailures(hierarchy,numberOfFailures){
        this.hierarchyList.forEach(item=>{
          if (hierarchy === item.hierarchy){
              this.$set(item,'outliers',numberOfFailures)
          }
        })
        this.$forceUpdate();
      },
			capacityInput(capacity) {
				if (capacity > 9999) {
					this.$nextTick(() => {
						this.item.capacity = 9999;
					})
				}
			},
			getHierarchyByDeviceId() {
				if (this.$u.test.isEmpty(this.params.deviceId)) {
					this.$helpers.toast("设备号为空");
					return
				}
				uni.showLoading({
					title: '加载中...'
				});
				this.$api('displayRack.getHierarchyByDeviceId', this.params).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.hierarchyList = res.data;
						this.params.hierarchy = this.params.hierarchy ? this.params.hierarchy : this.hierarchyList[
							0].hierarchy;
						this.findDisplayByDeviceIdAndHierarchy();
					} else {
						this.$helpers.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			findDisplayByDeviceIdAndHierarchy() {
				if (!this.switchFlag) {
					return;
				}
				this.switchFlag = false;
				this.$api('displayRack.findDisplayByDeviceIdAndHierarchy', this.params).then(res => {
					if (res.status == 0) {
						this.switchFlag = true;
						this.listData = res.data;
					} else {
						this.$helpers.toast(res.msg);
					}
				})
			},
			switchEnabled(e, item) {
				const index = this.batchParams.displayRackItemDtos.findIndex(i => i.did === item.did);

				if (index !== -1) {
					// 如果item已存在，从数组中删除
					this.batchParams.displayRackItemDtos.splice(index, 1);
				} else {
					// 如果item不存在，追加到数组中
					this.batchParams.displayRackItemDtos.push(item);
				}
			},
			//层级大写转换
			numberToUpperCase(num) {
				const upperCaseNumbers = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
				const upperCaseTens = ["", "十", "二十", "三十", "四十", "五十", "六十", "七十", "八十", "九十"];

				num = parseInt(num);

				if (isNaN(num)) {
					return "NaN";
				}

				if (num < 10) {
					return upperCaseNumbers[num];
				} else if (num < 20) {
					return upperCaseTens[1] + (num === 10 ? "" : upperCaseNumbers[num - 10]);
				} else {
					const units = num % 10;
					const tens = Math.floor(num / 10);
					return upperCaseTens[tens] + (units !== 0 ? upperCaseNumbers[units] : "");
				}
			},
			findDisplayByDeviceId() {
				if (!this.switchFlag) {
					return;
				}
				this.switchFlag = false;
				this.$api('displayRack.findDisplayByDeviceId', this.batchParams).then(res => {
					if (res.status == 0) {
						this.batchParams.pageNum = res.data.pageNum;
						this.batchParams.totalPage = res.data.pages;
						this.switchFlag = true;
						this.status = res.data.list.length === 10 ? 'loadmore' : 'nomore';
						res.data.list.forEach((item, index) => {
							if (this.batchParams.isAll == true) {
								item.enabled = true;
							} else if (this.batchParams.isAll == false) {
								item.enabled = false;
							}
						})
						this.listAll = [...this.listAll, ...res.data.list];
						if (this.batchParams.pageNum >= res.data.pages) {
							this.status = 'nomore';
						}
					} else {
						this.switchFlag = true;
						this.$helpers.toast(res.msg);
					}
				})
			},
			updateOffEnabledById(itemData) {
				if (!this.switchFlag) {
					return;
				}
				this.switchFlag = false;
				let params = {
					id: itemData.did,
					enabled: itemData.enabled
				}
				if (!params.id) {
					this.$helpers.toast("货道不存在，请重新进入页面查看");
					this.switchFlag = true;
					return;
				}
				this.$api('displayRackItem.updateOffEnabledById', params).then(res => {
					if (res.status == 0) {
						this.switchFlag = true;
					} else {
						this.$helpers.toast(res.msg);
					}
				})
			},
			operationSwitch(itemData) {
				if (!this.switchFlag) {
					return;
				}
				itemData.enabled = !itemData.enabled;
				this.updateOffEnabledById(itemData);
			},
			motorTesting() {
				this.tipsShow = !this.tipsShow;
				// this.refresh();
			},
			editShow(itemData) {
				if (!this.switchFlag) {
					return;
				}
				this.restockShow = true;
				this.item = JSON.parse(JSON.stringify(itemData));
			},
			edit() {
				if (!this.switchFlag) {
					return;
				}
				this.switchFlag = false;
				uni.showLoading({
					title: '编辑中...',
					mask: true
				});
				let params = {
					id: this.item.did,
					alias: this.item.alias,
					capacity: this.item.capacity
				}
				if (!params.id) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.$helpers.toast("货道不存在，请重新进入页面查看");
					this.switchFlag = true;
					return;
				}
				if (!params.alias) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.$helpers.toast("请输入货道编号");
					this.switchFlag = true;
					return;
				}
				if (!params.capacity) {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.$helpers.toast("请输入货道容量");
					this.switchFlag = true;
					return;
				}
				this.$api('displayRackItem.updateAliasById', params).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.switchFlag = true;
						this.restockShow = false;
						this.refresh();
					} else {
						this.$helpers.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
			//刷新数据
			refresh() {
				// this.hierarchyList= [];
				// this.listData = [];
				this.params.pageNum = 1;
				this.params.totalPage = 1;
				this.getHierarchyByDeviceId();
			},
      allTests(){
        if (this.isBluetooth == 'true') {
          if (this.connectionStatus === 1){
            this.$helpers.toast("正在连接设备中...");
          }else if (this.connectionStatus === 2){
            this.sendInspectionTrackMotor();
          }else if (this.connectionStatus === 3){
            this.$bluetooth.disconnectPrompt();
          }
        }else{
          this.sendInspectionTrackMotor();
        }
      },
			//发送检测所有货道电机请求
			sendInspectionTrackMotor() {
        this.showAllDetection=false;
				this.$api('displayRackItem.sendInspectionTrackMotor', {
					'deviceId': this.params.deviceId,
          'socketId': getApp().globalData.socketId,
          'isAll': true,
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 0) {
              res.data.forEach(item =>{
                this.motorStatusMap.set(item,3);
              })
            this.$forceUpdate();
					} else {
						this.$helpers.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},
      aTest(itemData){
        if (this.isBluetooth == 'true') {
            if (this.connectionStatus === 1){
                this.$helpers.toast("正在连接设备中...");
            }else if (this.connectionStatus === 2){
                this.detection(itemData);
            }else if (this.connectionStatus === 3){
                this.$bluetooth.disconnectPrompt();
            }
        }else{
          this.detection(itemData);
        }
      },
			//单货道检测
			detection(itemData) {
				if (!itemData.enabled) {
					this.$helpers.toast("已关闭的货道不可以进行点击检测");
					return;
				}
				this.$api('displayRackItem.sendInspectionTrackMotor', {
					'id': itemData.did,
					'deviceId': this.params.deviceId,
          'socketId': getApp().globalData.socketId,
          'isAll': false,
				}).then(res => {
					if (res.status == 0) {
            //修改货道为检测中
            this.motorStatusMap.set(itemData.hierarchy+''+itemData.freightLane,3);
            this.$forceUpdate();
					} else {
						this.$helpers.toast(res.msg);
					}
				}).catch(err => {

				})
			},
			detectionAllShow() {
				if (!this.switchFlag) {
					return;
				}
				this.showAllDetection = true;
			},

			setAllShow() {
				if (!this.switchFlag) {
					return;
				}
				this.batchParams.displayRackItemDtos = [];
				this.batchParams.pageNum = 1;
				this.batchParams.totalPage = 1;
				this.batchParams.isAll = null;
				this.listAll = [];
				this.findDisplayByDeviceId();
				this.showSetAll = true;
			},
			setAll() {

				if (!this.switchFlag) {
					return;
				}
				uni.showLoading({
					title: '修改中...',
					mask: true
				});
				this.switchFlag = false;
				this.$api('displayRackItem.updateAllOffEnabledById', this.batchParams).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.switchFlag = true;
						this.showSetAll = false;
						this.listData = [];
						this.findDisplayByDeviceIdAndHierarchy();
					} else {
						this.$helpers.toast(res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})

			},
			openAll() {
				this.batchParams.isAll = true;
				this.listAll.forEach((item, index) => {
					item.enabled = true;
				})
			},
			closeAll() {
				this.batchParams.isAll = false;
				this.listAll.forEach((item, index) => {
					item.enabled = false;
				})
			},
			clickHierarchy(item) {
				this.params.hierarchy = item.hierarchy;
				this.listData = [];
				this.findDisplayByDeviceIdAndHierarchy();
			},
			reachBottom() {
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				this.batchParams.pageNum++;
				this.findDisplayByDeviceId();
			},
			// 获取各个盒子的高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;

					}
				})

			},
		}
	};
</script>

<style lang="scss">
	.space {
		height: 40rpx;
	}

	page {
		background: rgb(255, 255, 255);
	}

	.size24-color29 {
		font-size: 24rpx;
		color: #22222299;
	}

	.modal-containers {
		/deep/ .u-popup__content {
			height: 70%;
		}
	}

	/deep/ .u-switch__bg {
		background: rgba(0, 0, 0, 0.2) !important;
	}

	/deep/ .u-button--active {
		color: #ffffff !important;
		background: rgb(96, 114, 255) !important;
	}

	/deep/ .u-input {
		border-radius: 12px !important;
		width: 317rpx;
		height: 40rpx;
	}

	/deep/ .u-checkbox__icon-wrap {
		margin: 0 !important;
	}

	/deep/ .u-modal__content {
		padding: 40rpx 70rpx 0rpx 70rpx !important;
	}

	.bottom-container {
		padding-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		width: 100%;
		bottom: 0px;

		.left-box {
			margin-left: 60rpx;
			display: flex;
			align-items: center;

			.text {
				margin-left: 20rpx;
				color: rgb(34, 34, 34);
				font-size: 32rpx;
			}
		}
	}

	.restock-modal-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.kindTips-hint {
			margin-top: 20rpx;
			color: rgb(34, 34, 34);
			font-size: 32rpx;
		}

		.progress-bar-box {
			width: 368rpx;
			height: 12rpx;
			background: rgb(237, 242, 253);
			border-radius: 2px;

			.progress {
				height: 12rpx;
				background: rgb(254, 182, 97);
			}
		}

		.progress-bar {
			margin-top: 89rpx;
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.progress-bar-text {
				color: rgba(34, 34, 34, 0.7);
				font-size: 28rpx;
			}
		}

		.restock-cancel {
			margin-top: 32rpx;
			text-align: center;
			font-size: 28rpx;
			color: rgb(96, 114, 255);
		}

		.restock-box {

			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.restock-name {
				color: rgb(34, 34, 34);
				font-size: 28rpx;
				width: 150rpx;
			}
		}

	}

	.serial-number {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		left: 0rpx;
		top: -51rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		background: rgb(96, 114, 255);
		border-radius: 50%;
	}

	.content {

		padding: 0 24rpx;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr 4fr;

		.goods-right {
			.top-box {
				display: flex;
				justify-content: space-between;
			}

			.goods-box {
				margin-bottom: 50rpx;

				.goods-information-box {
					display: flex;
					justify-content: space-between;

					.fault {
						background: rgba(255, 0, 0, 0.1) !important;
						color: rgba(255, 0, 0, 0.8) !important;
					}

					.goods-img-box {
						width: 160rpx;
						height: 160rpx;
						//background: rgba(255, 0, 0, 0.1);
						background: #F5F6F8;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;
						.box {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							text-align: center;
							padding: 12rpx;
							font-size: $f-base;
							color: red;
						}

						img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20px;
						}

					}

					.goods-information {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 21rpx;
						width: 375rpx;

						.top {
							display: flex;
							justify-content: space-between;

							.switch-box-close {
								padding: 2rpx 2rpx 2rpx 12rpx !important;
								background: rgba(0, 0, 0, 0.2) !important;
							}

							.switch-box {
								width: 85rpx;
								height: 40rpx;
								background: rgb(96, 114, 255);
								border-radius: 30px;
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding: 2rpx 12rpx 2rpx 2rpx;

								.switch-text {
									font-size: 20rpx;
									color: rgb(255, 255, 255);
								}

								.switch-text-close {
									color: rgba(0, 0, 0, 0.8) !important;
								}

								.switch-button {
									width: 36rpx;
									height: 36rpx;
									background: rgb(255, 255, 255);
									border-radius: 50%;
								}
							}
						}

						.bottom {
							display: flex;
							flex-direction: row-reverse;
						}

					}
				}
			}

			.goods-inventory {
				display: flex;
				justify-content: space-between;
				background: rgb(245, 246, 248);
				border-radius: 16px;
				padding: 27rpx 24rpx 25rpx;

				.goods-inventory-box {
					display: flex;
					flex-wrap: wrap;

					justify-content: center;

					.name {
						height: auto;
						width: auto;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
					}

					.title {
						height: auto;
						width: auto;
						font-size: 32rpx;
						color: rgb(0, 0, 0);
					}
				}
			}
		}

		.goods-left {
			width: 160rpx;

			.goods-group {
				display: flex;
				position: relative;
				font-size: 32rpx;
				padding: 37rpx 0;
			}

			.goods-group-border {
				border-left: 10rpx solid rgb(96, 114, 255);
				border-radius: 20%;
				color: rgb(96, 114, 255);
			}

			.quantity {
				width: 32rpx;
				height: 32rpx;
			}

			.goods-group-name {
				position: relative;
				padding-left: 8rpx;
			}

			.color {
				color: rgb(96, 114, 255);
			}
		}

	}

	.model {
		display: flex;
		flex-direction: column;

	}

	.model-set {
		display: flex;
		align-items: center;
		font-size: $f-base;
		padding-block: 15rpx;
		padding-inline: 10rpx;
	}
</style>
